

import React from 'react';
import { View, Text, ScrollView, TouchableOpacity, Linking, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

const AboutUsScreen = () => {
  const router = useRouter();

  const handleBackPress = () => {
    if (router.canGoBack()) {
      router.back();
    }
  };

  const handleWebsitePress = async () => {
    try {
      const url = 'https://www.flowbatch.com';
      const supported = await Linking.canOpenURL(url);
      if (supported) {
        await Linking.openURL(url);
      } else {
        Alert.alert('错误', '无法打开网站链接');
      }
    } catch (error) {
      Alert.alert('错误', '打开网站时发生错误');
    }
  };

  const handleEmailPress = async () => {
    try {
      const email = 'mailto:support@flowbatch.com';
      const supported = await Linking.canOpenURL(email);
      if (supported) {
        await Linking.openURL(email);
      } else {
        Alert.alert('错误', '无法打开邮件客户端');
      }
    } catch (error) {
      Alert.alert('错误', '打开邮件时发生错误');
    }
  };

  const handlePhonePress = async () => {
    try {
      const phone = 'tel:400-888-8888';
      const supported = await Linking.canOpenURL(phone);
      if (supported) {
        await Linking.openURL(phone);
      } else {
        Alert.alert('错误', '无法拨打电话');
      }
    } catch (error) {
      Alert.alert('错误', '拨打电话时发生错误');
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton} 
          onPress={handleBackPress}
          activeOpacity={0.7}
        >
          <FontAwesome6 name="arrow-left" size={18} color="#1F2937" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>关于我们</Text>
        <View style={styles.headerPlaceholder} />
      </View>

      <ScrollView 
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* 应用Logo和名称 */}
        <View style={styles.appInfoSection}>
          <LinearGradient
            colors={['rgba(150, 159, 255, 0.1)', 'rgba(81, 71, 255, 0.1)']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.logoContainer}
          >
            <FontAwesome6 name="layer-group" size={48} color="#969FFF" />
          </LinearGradient>
          <Text style={styles.appName}>流批通</Text>
          <Text style={styles.appSubtitle}>FlowBatch</Text>
        </View>

        {/* 版本信息 */}
        <View style={styles.versionCard}>
          <View style={styles.versionInfo}>
            <Text style={styles.versionTitle}>当前版本</Text>
            <Text style={styles.versionDescription}>最新版本，体验更佳</Text>
          </View>
          <LinearGradient
            colors={['#969FFF', '#5147FF']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.versionBadge}
          >
            <Text style={styles.versionNumber}>v1.2.3</Text>
          </LinearGradient>
        </View>

        {/* 应用信息 */}
        <View style={styles.appDetailsSection}>
          <View style={styles.infoCard}>
            <View style={styles.infoCardContent}>
              <LinearGradient
                colors={['#969FFF', '#5147FF']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 1 }}
                style={styles.infoIcon}
              >
                <FontAwesome6 name="circle-info" size={16} color="#FFFFFF" />
              </LinearGradient>
              <View style={styles.infoTextContainer}>
                <Text style={styles.infoTitle}>应用介绍</Text>
                <Text style={styles.infoDescription}>
                  流批通是一款基于Flowable工作流引擎的企业级移动审批应用，为企业管理人员提供高效、便捷、移动化的审批处理能力，助力企业数字化转型。
                </Text>
              </View>
            </View>
          </View>

          <View style={styles.infoCard}>
            <View style={styles.infoCardContent}>
              <LinearGradient
                colors={['#4ADE80', '#22C55E']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 1 }}
                style={styles.infoIcon}
              >
                <FontAwesome6 name="star" size={16} color="#FFFFFF" />
              </LinearGradient>
              <View style={styles.infoTextContainer}>
                <Text style={styles.infoTitle}>核心功能</Text>
                <View style={styles.featuresList}>
                  <Text style={styles.featureItem}>• 随时随地移动审批</Text>
                  <Text style={styles.featureItem}>• 透明可控的审批流程</Text>
                  <Text style={styles.featureItem}>• 高效便捷的批量处理</Text>
                  <Text style={styles.featureItem}>• 数据驱动的统计分析</Text>
                  <Text style={styles.featureItem}>• 灵活的表单配置</Text>
                </View>
              </View>
            </View>
          </View>
        </View>

        {/* 联系信息 */}
        <View style={styles.contactCard}>
          <Text style={styles.contactTitle}>联系我们</Text>
          <View style={styles.contactList}>
            <TouchableOpacity 
              style={styles.contactItem} 
              onPress={handleWebsitePress}
              activeOpacity={0.7}
            >
              <View style={styles.contactItemLeft}>
                <FontAwesome6 name="globe" size={16} color="#969FFF" />
                <Text style={styles.contactLabel}>官方网站</Text>
              </View>
              <View style={styles.contactItemRight}>
                <Text style={styles.contactValue}>www.flowbatch.com</Text>
                <FontAwesome6 name="external-link" size={12} color="#6B7280" />
              </View>
            </TouchableOpacity>

            <TouchableOpacity 
              style={styles.contactItem} 
              onPress={handleEmailPress}
              activeOpacity={0.7}
            >
              <View style={styles.contactItemLeft}>
                <FontAwesome6 name="envelope" size={16} color="#969FFF" />
                <Text style={styles.contactLabel}>客服邮箱</Text>
              </View>
              <View style={styles.contactItemRight}>
                <Text style={styles.contactValue}>support@flowbatch.com</Text>
                <FontAwesome6 name="external-link" size={12} color="#6B7280" />
              </View>
            </TouchableOpacity>

            <TouchableOpacity 
              style={styles.contactItem} 
              onPress={handlePhonePress}
              activeOpacity={0.7}
            >
              <View style={styles.contactItemLeft}>
                <FontAwesome6 name="phone" size={16} color="#969FFF" />
                <Text style={styles.contactLabel}>客服热线</Text>
              </View>
              <View style={styles.contactItemRight}>
                <Text style={styles.contactValue}>400-888-8888</Text>
                <FontAwesome6 name="external-link" size={12} color="#6B7280" />
              </View>
            </TouchableOpacity>
          </View>
        </View>

        {/* 版权声明 */}
        <View style={styles.copyrightSection}>
          <View style={styles.copyrightCard}>
            <Text style={styles.copyrightText}>
              © 2024 流批通科技有限公司{'\n'}
              版权所有，保留一切权利
            </Text>
          </View>
          
          <View style={styles.licenseInfo}>
            <Text style={styles.licenseText}>本应用采用Flowable工作流引擎</Text>
            <Text style={styles.licenseText}>遵循Apache License 2.0开源协议</Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default AboutUsScreen;

